import React, { useEffect } from "react";
import styles from "./Login.less";
import { IRouteComponentProps } from 'umi'
import { Form, Input, Button, Checkbox, Radio } from 'antd';
import useStore from "@/context/useStore";
import { observer } from "mobx-react-lite";
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons';

const Login: React.FC<IRouteComponentProps> = ({ history, location }) => {
    // 获取仓库
    const { user } = useStore();

    // 获取验证码
    useEffect(() => {
        user.logout();
        user.getCapture();
    }, [])

    // 提交正确
    const onFinish = async (values: any) => {

        let result = await user.login(values);
        console.log(values);
        if (result) {

            if (values.key === "student") {
                console.log(1111);
                history.replace('/student/studentSkill/studentSkill');
            } else {
                history.replace('/teachers/postSkill');
            }

        }
    };

    return <div className={styles.login}>
        <Form
            className={styles.login_form}
            initialValues={{ username: '郭老师', password: '123456', remember: true, key: 'teacher' }}
            onFinish={onFinish}
        >
            <h2 className={styles.h2}>八维生产特性实训平台</h2>
            <Form.Item

                name="username"
                rules={[{ required: true, message: '正确输入用户名!' }]}
            >
                <Input
                    style={{ width: "100%", height: "40px", marginTop: "10px" }}
                    prefix={<UserOutlined style={{ fontSize: "18px" }} />}
                />
            </Form.Item>

            <Form.Item
                name="password"
                rules={[{ required: true, message: '正确输mmmm!' }]}
            >
                <Input.Password
                    prefix={<LockOutlined style={{ fontSize: "18px" }} />}
                    style={{ width: "100%", height: "40px" }} />
            </Form.Item>
            {/* 验证码 */}
            <div style={{ display: "flex", width: "100%", justifyContent: "space-between" }}>
                <Form.Item style={{ width: "100%", height: "40px" }}
                    name='code'
                    rules={[{ required: true, message: '正确输入验证码!' }]}>
                    <Input
                        prefix={<SafetyOutlined style={{ fontSize: "18px" }} />}
                        style={{ width: "180px", height: "38px" }} />
                </Form.Item>
                {user.captchaImage.img ?
                    <img
                        src={`data:image/gif;base64,${user.captchaImage.img}`}
                        style={{ width: "120px", height: "40px" }}
                        alt=""
                        onClick={() => user.getCapture()} /> : null}
            </div>
            <div style={{ width: "100%", display: "flex", margin: "10px 0px -10px 0px" }}>
                <Form.Item
                    name="remember"
                    valuePropName="checked"
                    style={{ width: "100px", height: "40px", alignContent: "center", justifyContent: "center" }}
                >
                    <Checkbox>记住我</Checkbox>
                </Form.Item>

                <Form.Item name="key">
                    <Radio.Group
                        style={{
                            width: "160px",
                            height: "40px",
                            flex: "1",
                            display: "flex",
                            flexDirection: "row",
                            alignItems: "center",
                            justifyContent: "space-between"
                        }}>
                        <Radio value="teacher">老师</Radio>
                        <Radio value="student">学生</Radio>
                    </Radio.Group>
                </Form.Item>
            </div>
            <Form.Item >
                <Button
                    type="primary"
                    htmlType="submit"
                    style={{ lineHeight: "20px", width: "100%", height: "42px", fontSize: "20px" }}>
                    登录
                </Button>
            </Form.Item>
        </Form>
    </div>
}

export default observer(Login)
